import React, {Component} from 'react';
import {Layout, Menu, Icon} from 'antd';
import {menuList} from './index.css';
import NavLink from "../NavLink/NavLink";

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

const {Header, Content, Footer, Sider} = Layout;

const menus = [
  ['home', '/home', '首页', 'home'],
  ['orders', '/orders', '订单管理', 'solution'],
  ['foods', '/storage', '菜品管理', 'upload'],
  ['class', '/resource', '分类管理', 'pay-circle-o'],
  ['times', '/settlement', '时段管理', 'pushpin-o'],
  ['qrcode', '/bills', '二维码管理', 'copy'],
];

export default class SiderMenu extends Component {

  constructor(props) {
    super(props);

    this.state = {
      collapsed: false,
    };
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }

  render() {

    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={this.state.collapsed}>

        <Menu
          onClick={this.handleClick}
          className={menuList}
          mode="inline"
          theme="dark"
        >
          {
            menus.map(([key, path, text, icon], index) => {
                return (
                  <MenuItem key={key}>
                    <NavLink target={path}
                             linkText={<span><Icon type={icon}/><span>{text}</span></span>}/>
                  </MenuItem>
                );
              }
            )
          }
        </Menu>

      </Sider>
    );
  }
}
